<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D俄罗斯方块</title>
  <!-- 引入Three.js库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <!-- 引入自定义样式和脚本 -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="game-container">
    <!-- 游戏画布 -->
    <canvas id="gameCanvas"></canvas>

    <!-- 游戏信息面板 -->
    <div class="game-info">
      <h1>3D俄罗斯方块</h1>
      <div class="score-board">
        <p>分数: <span id="score">0</span></p>
        <p>等级: <span id="level">1</span></p>
      </div>
      <div class="controls">
        <button id="startBtn">开始游戏</button>
        <button id="pauseBtn">暂停</button>
      </div>
      <!-- 操作说明 -->
      <div class="instructions">
        <h3>操作说明:</h3>
        <p>← → : 左右移动</p>
        <p>↑ : 旋转</p>
        <p>↓ : 加速下落</p>
        <p>空格 : 直接落下</p>
      </div>
      <div class="touch-controls">
        <div class="touch-btn" id="leftBtn">←</div>
        <div class="touch-btn" id="rotateBtn">↑</div>
        <div class="touch-btn" id="rightBtn">→</div>
        <div class="touch-btn" id="downBtn">↓</div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>